import React from 'react';
import '../../styles/home/class_nav.css'
import { class_list } from '../../api'
import { Carousel, WingBlank } from 'antd-mobile';
import { NavLink} from "react-router-dom"
class Class_nav extends React.Component {
  constructor() {
    super()
    this.state = {
      data: ['1', '2'],
      imgHeight: 200,
      data2: []
    }
  }
  componentDidMount() {
    class_list()
      .then(res => {
        // console.log(res)
        this.setState({
          data2: res.data
        })
      })

  }

  render() {
    // console.log(this.state.data2)
      let items = this.state.data2
      let items1 = items.slice(0, 10)
      let items2 = items.slice(10)
      let list = items1.map((v, i) => {
        return (<li key={i}>
          <NavLink to={'/food/'+i+'&'+v.title}>
            <img src={'https://fuss10.elemecdn.com' + v.image_url} alt="图片失踪了" />
            <span>{v.title}</span>
          </NavLink>
        </li>)
      })
      let list1 = items2.map((v, i) => {
        return (<li key={i + 10}>
         <NavLink to={'/food/'+(i + 10)+'&'+v.title}>
            <img src={'https://fuss10.elemecdn.com' + v.image_url} alt="图片失踪了" />
            <span>{v.title}</span>
          </NavLink>
        </li>)
      })

      let oo
      if(this.state.data2.length===0){
          oo=null
      }else{
        oo=(<WingBlank style={{ margin: 0, padding: 0 }}>
          <Carousel
            autoplay={false}
            infinite
          >
            <ul>
              {list}
            </ul>
            <ul>
              {list1}
            </ul>
          </Carousel>
        </WingBlank>)
      }
      
    return (
      <div className='nav_box'>
        {oo}
      </div>
    );
  }
}

//   ReactDOM.render(<App />, mountNode);



export default Class_nav